<template>
  <div class="main-box">
    <div v-if="active===0" class="box-top">
      <b>发票抬头</b>
      <p>发票抬头需与收票单位的全称一致，不得使用简称、缩写或其他不规范名称。</p>
      <b>税号（纳税人识别号）</b>
      <p>填写纳税人识别号时，请确保正确无误，通常为统一社会信用代码。个人发票无需填写税号。</p>
      <b>开票项目</b>
      <p>发票项目应与实际交易内容保持一致，不能模糊或随意更改。应根据不同的业务类型选择正确的开票项目。</p>
      <b>金额与税率</b>
      <p>发票上的金额和税率必须准确计算。含税金额与不含税金额应区分清楚，税额应根据适用税率进行准确计算。</p>
      <b>发票申请</b>
      <p>正确填写发票基本信息，预计在1-3个工作日内发送到邮箱或者手机，注意接收短信消息</p>
      <div class="bottom">
        <a href="javascript:void (0)" @click="active=1">去开票</a>
        <a href="javascript:void (0)" @click="active=2">开票记录</a>
      </div>
    </div>
    <div v-else-if="active===1" class="record">
      <div class="title">
        <el-tooltip class="item" effect="dark" content="返回上一级" placement="top-start">
          <a href="javascript:void (0)" @click="active=0"><i class="el-icon-back"/></a>
        </el-tooltip>
        申请开票
      </div>
      <lz-apply-invoice></lz-apply-invoice>

    </div>
    <div v-else-if="active===2" class="record">
      <div class="title">
        <el-tooltip class="item" effect="dark" content="返回上一级" placement="top-start">
          <a href="javascript:void (0)" @click="active=0"><i class="el-icon-back"/></a>
        </el-tooltip>
        开票记录
      </div>
      <el-table :data="tableData" border max-height="600px" style="width: 100%">
        <el-table-column prop="orderID" label="订单编号" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="header" label="发票抬头" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column prop="money" label="开票金额" align="center"  show-overflow-tooltip width="150"></el-table-column>
        <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <el-tag :type="type(row.status)">{{status(row.status)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="开票时间" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column prop="address" label="操作" align="center"  width="150">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary">立即下载</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="bottom-box">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        active:0,
        tableData: [
          {
            orderID: 'YSD7015012580000',
            name: '商务标书范本（3）',
            header: '安徽标书标权有限责任公司',
            money: '650',
            status:2,
            date: '2024-9-12 15:00:08',
          },
          {
            orderID: 'YSD7015012580000',
            name: '商务标书范本（3）',
            header: '安徽标书标权有限责任公司',
            money: '650',
            status:1,
            date: '2024-9-12 15:00:08',
          },
          {
            orderID: 'YSD7015012580000',
            name: '商务标书范本（3）',
            header: '安徽标书标权有限责任公司',
            money: '650',
            status:3,
            date: '2024-9-12 15:00:08',
          },


        ]
      }
    },
    methods:{
      status(item){
        switch (item){
          case 1:{
            return '待审核'
          }
          case 2:{
            return '审核通过'
          }
          case 3:{
            return '审核不通过'
          }

        }
      },
      type(item){
        switch (item){
          case 1:{
            return 'info'
          }
          case 2:{
            return 'success'
          }
          case 3:{
            return 'danger'
          }

        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .main-box{
    width: 100%;
    padding: 3%;
    box-sizing: border-box;
    .box-top{
      width: 100%;
      min-height: 130px;
      background: #f8f8f8;
      font-size: 14px;
      padding: 3%;
      box-sizing: border-box;
      p{
        line-height: 35px;
      }
      .bottom{
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        a{
          min-width: 100px;
          height: 38px;
          margin-right: 10px;
          display: flex;
          justify-content: center;
          padding: 0 10px;
          align-items: center;
          background: #5887ff;
          border-radius: 8px;
          color: #fff;
        }
      }
    }
    .record{
      width: 100%;
      min-height: 100px;
      .title{
        width: 100%;
        font-size: 16px;
        font-family: 'OPPOB', sans-serif;
        height: 60px;
        display: flex;
        align-items: center;
        a{
          font-size: 26px;
          font-weight: 800;
          margin-right: 10px;
        }
      }
      .bottom-box{
        width: 100%;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: right;
      }
    }
  }
</style>